<!-- 动态彩色绘图板 -->
<!DOCTYPE html>
<style>
  canvas {
    border: 3px dashed #333;
    cursor: crosshair;
  }
  body { display: flex; justify-content: center; }
</style>
<canvas id="drawCanvas" width="800" height="500"></canvas>

<script>
  const canvas = document.getElementById('drawCanvas');
  const ctx = canvas.getContext('2d');
  let isDrawing = false;
  let hue = 0;

  ctx.lineWidth = 15;
  ctx.lineCap = 'round';

  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mouseout', () => isDrawing = false);

  function startDrawing(e) {
    isDrawing = true;
    [ctx.lineWidth, hue] = [Math.random()*30 + 5, (hue + 1) % 360];
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
  }

  function draw(e) {
    if (!isDrawing) return;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }
</script>
